<template>
	<view class="page-background">
		<uni-swipe-action ref="swipeAction">
			<!-- 作用于app端nvue页面的下拉加载 -->

			<uni-swipe-action-item class="content-box" v-for="(item, index) in data" :key="index"
				:right-options="buttonOptions" @click="swipeClick($event, item)">

				<view class="flex-container">
					<text class="address">{{item.brand}}</text>
					<view class="text-alignment">
						<text class="enable-true" v-show="item.is_enable == true">启用</text>
						<text class="enable-false" v-show="item.is_enable == false">禁用</text>
					</view>
				</view>
			</uni-swipe-action-item>
			<!-- <uni-load-more :status="loading?'loading':(hasMore ? 'more' : 'noMore')"></uni-load-more> -->
		</uni-swipe-action>
		<uni-fab ref="fab" horizontal="right" vertical="bottom" :pop-menu="false" @fabClick="fabClick" />
		<!-- </view>-->
	</view>
</template>

<script>
	// 关闭系统自带的加载动画
	const brand = uniCloud.importObject("star-service", {
		customUI: true // 取消自动展示的交互提示界面
	})

	export default {
		data() {
			return {
				data: [],
				loading: true,
				// hasMore: false,

				showRefresh: false,
				// 这个按钮选项如果是空数据，左滑动按钮是不显示的
				buttonOptions: [{
						text: '编辑',
						style: {
							backgroundColor: '#007aff'
						}
					},
					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				],

			}
		},
		onLoad() {},

		onPullDownRefresh() {
			this.refreshBrandList()
			// setTimeout(() => uni.navigateBack(), 500)
			// uni.stopPullDownRefresh()

		},

		onReachBottom() {
			// 获得已加载记录长度，跳过记录
			let skip = this.data.length
			//获取剩余记录
			this.getPageList(skip).then(res => {
				// console.log(res)
				if (res.count > skip) {
					this.data.push(...res.data)
				}
			})
		},

		mounted() {
			this.refreshBrandList()
		},

		methods: {
			//刷新品牌列表
			refreshBrandList() {
				//刷新列表只用来获取必要数据，并返回。不做视图数据更新
				// var p = new Promise(function(resolve, reject) {
				//获取和初始化分页记录。
				brand.getBrandList(0).then(res => {
					if (res.errCode === 0) {
						this.data.length = 0
						this.data.push(...res.data)

						uni.stopPullDownRefresh()
						// this.showRefresh = false
					}
					return
					// resolve(res)
				}).catch(err => {
					uni.showModal({
						content: err.message || '请求数据失败',
						showCance: false
					})
					return
				})
				// })
				// console.log(p)
				// return p
			},

			getPageList(param) {
				let page = {}
				var p = new Promise(function(resolve, reject) {
					brand.getBrandList(param).then(res => {
						if (res.errCode === 0) {
							return resolve(res)
						}
					}).catch(err => {
						return reject(err)
					})
				})
				return p
			},

			// 滑动事件处理
			swipeClick(e, item) {
				let { content } = e;
				if (content.text === '编辑') {
					// console.log(item)
					uni.navigateTo({
						// 带参数跳转
						url: './edit?action=edit&item=' + encodeURIComponent(JSON.stringify(item)),
						events: {
							// 监听新增数据成功后, 刷新当前页面数据
							refreshData: () => {
								this.refreshBrandList()
								// this.$refs.udb.loadData({
								// 	clear: true
								// })
							}
						}
					})
				} else if (content.text === '删除') {
					// 打开对话框
					uni.showModal({
						content: '确认删除该信息？',
						success: (res) => {
							if (res.confirm) {
								// console.log('用户点击确定');
								brand.deleteBrand(item._id).then(res => {
									if (res.errCode === 0) {
										uni.showToast({
											title: '删除成功'
										})
										//刷新列表
										this.refreshBrandList()
									}
								}).catch(err => {
									uni.showModal({
										content: err.message || '请求数据失败',
										showCancel: false
									})
								})
							} else if (res.cancel) {

							}
						}
					})
				}
			},

			fabClick() {
				// 打开新增页面
				uni.navigateTo({
					url: './edit?action=add',
					events: {
						// 监听新增数据成功后, 刷新当前页面数据
						refreshData: () => {
							this.refreshBrandList()
						}
					}
				})
			}
		},


	}
</script>

<style lang="scss">
	@import "../../../uni.scss";

	// .page {
	// 	background: #f8f8f8;
	// }
	.content-box {
		// #ifdef APP-NVUE */
		justify-content: center;
		/* #endif
		
		background: #ffffff;   //列表容器背景色
		margin: 10rpx;        //列表上下间距
		border-radius: 20rpx; //圆角直径
		// padding: 0px 0px; //四周的填充距离
		// position: relative; //指定元素的定位方式
		// background-color: $uni-bg-color; //背景颜色
		// border-color: #00ff00; //方框底部颜色
		// border-bottom-width: 1px; //方框底部宽度
		// border-style: none; //方框底部样式
        // line-height: 20px; //行高
        // height: 60px; //元素的高度
	}

	.city {
		padding: 5px 10px; //填充距离
		font-size: $uni-font-size-sm;
	}

	.address {
		padding: 5px 10px; //填充距离
		font-size: $uni-font-size-lg
	}

	.flex-container {
		height: 60px;        //滑动区域的高度
		display: flex; //子元素对齐方式，弹性盒子
		// align-content: space-around;
		align-items: center; //子元素纵向居中对齐
	    // padding: 30px 6px; //填充距离
		justify-content: space-between; //子元素靠左对齐
	}

	.enable-true {
		margin-left: 10px;
		font-size: $uni-font-size-sm;
		border: 1px; //边框线宽
		padding: 1rpx 1rpx; //内部到边框边距
		border-radius: 4px; //圆角弧度
		// font-size: 10px; //字体大小
		color: $uni-color-primary; //文字颜色
		border-style: solid; //边框样式，四周都有
		border-color: $uni-color-primary; //边框颜色
        // display: flex;
        // align-items: center;
        // justify-content: center;
		// padding: 0px 0px; //填充距离
	
	}
	
	.enable-false {
		margin-left: 10px;
		font-size: $uni-font-size-sm;
		border: 1px; //边框线宽
		padding: 1px 1px; //内部到边框边距
		border-radius: 4px; //圆角弧度
		// font-size: 10px; //字体大小
		color: $uni-color-warning; //文字颜色
		border-style: solid; //边框样式，四周都有
		border-color: $uni-color-warning; //边框颜色
	    // display: flex;
	    // align-items: center;
	    // justify-content: center;
		// padding: 0px 0px; //填充距离
	}
	

	.text-alignment {
		display: flex; //子元素对齐方式，弹性盒子
		margin-right: 10px;
		// align-items: center; //子元素纵向居中对齐
		// padding: 30px 6px; //填充距离
		// display: flex; //子元素对齐方式，弹性盒子
		// justify-content: flex-start; //子元素靠左对齐
		// justify-self: flex-end;
		// align-content:flex-end;
		// border: 1px; //边框线宽
		// padding: 1px 2px; //内部到边框边距
		// border-radius: 4px; //圆角弧度
		// font-size: 10px; //字体大小
		// color: $uni-color-warning; //文字颜色
		// border-style: solid; //边框样式，四周都有
		// border-color: $uni-color-warning; //边框颜色
	}

	// .text-default {
	// 	margin-left: 10px;
	// 	border: 1px; //边框线宽
	// 	padding: 1px 2px; //内部到边框边距
	// 	border-radius: 4px; //圆角弧度
	// 	font-size: 10px; //字体大小
	// 	color: $uni-color-primary; //文字颜色
	// 	border-style: solid; //边框样式，四周都有
	// 	border-color: $uni-color-primary; //边框颜色

	// }

	// .row {
	// 	flex-direction: column;
	// }

	// .content-left-spacing {
	// 	padding: 0 10px; //左侧填充距离
	// }

	// .content-text {
	// 	padding: 5 10px; //左侧填充距离
	// 	font-size: 10px;
	// }

	// .button {
	// 	width: 40px;
	// 	height: 20px;
	// 	padding: 0px 0px;
	// 	font-size: 10px;
	// 	// background: $uni-color-primary;
	// 	// color: #fff;
	// 	line-height: 20px;
	// 	// border-radius: 50rpx;
	// 	// box-shadow: 0 5px 7px 0 rgba(86, 119, 252, 0.2);
	// }
</style>